<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 13569
  Date: 2021/3/17
  Time: 15:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>销售额和采购额</title>
    <script src="echart/echarts.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->


<form class="layui-form" action="" method="post" >
    <div class="layui-inline">
        <label class="layui-form-label"><span style="color: white">开始日期</span></label>
        <div class="layui-input-inline">
            <input type="date" name="start" id="date1" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off"
                   class="layui-input">

        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label"><span style="color: white">结束日期</span></label>
        <div class="layui-input-inline">
            <input type="date" name="end" id="date2" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">查询</button>
        </div>
    </div>

    </div>
</form>
<div id="main" style="width: 1200px;height:800px; margin:100px auto;" ></div>

<script type="text/javascript">
    layui.use(['jquery', 'form'], function () {

        var $ = layui.jquery;
        var form = layui.form;


        $(function () {
            show(null);
        });
        form.on('submit(demo1)', function (data) {

            var end=new Date(data.field.end);
            var start=new Date(data.field.start);
            var date=new Date();
            if (end>date){
                layer.msg('时间不能大于当前时间',{icon: 5});
            }else if (end<start){
                layer.msg('结尾时间不能大于起始时间',{icon: 5});
            } else {
                show(data.field);

            }
            return false;

        });

        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        function show(data) {
            $.ajax({
                type: 'post',
                url: 'statistics/profit',
                data: data,
                success: function (resultData) {
                    var option;
                    option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: '金额',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '40',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: resultData
                            }
                        ]
                    };

                    option && myChart.setOption(option);

                }
            })
        }
    })




</script>
</body>
</html>
